<script setup>
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const navs = reactive([{
  id: "0",
  title: "首页",
  icon: "home-o",
  path: "/",
},{
  id: "1",
  title: "提问",
  icon: "search",
  path: "/ask",
},{
  id: "2",
  title: "我的",
  icon: "friends-o",
  path: "/my",
},])

// 导航的默认选中项
const active = ref(0);
navs.some((val,idx)=>{
  active.value = idx;
  return val.path === route.path;
})
// 切换导航时的跳转
function changeFn(i){
  router.push(navs[i].path);
}
</script>

<template>
  <van-tabbar v-model="active" @change="changeFn">
    <van-tabbar-item v-for="item in navs" :icon="item.icon" :key="item.id">{{ item.title }}</van-tabbar-item>
  </van-tabbar>
</template>